<template>
  <div>
    <h1>会员权益列表</h1>
    <input type="button" value="添加" class="btn btn-primary" @click="add" />

    <div>
      权益名称<input type="text" v-model="queryInfo.rightName" /> 开始时间<input
        type="date"
        v-model="queryInfo.date1"
      />
      结束时间<input type="date" v-model="queryInfo.date2" />
      <input type="button" value="查询" class="btn btn-info" @click="getlist" />
    </div>

    <table class="table table-bordered">
      <tbody>
        <tr>
          <td>ID</td>
          <td>权益名称</td>
          <td>权益状态</td>
          <td>创建时间</td>
          <td>操作</td>
        </tr>

        <tr v-for="item in data.list" :key="item.id">
          <td>{{ item.Id }}</td>
          <td>{{ item.RightName }}</td>
          <td>{{ (item.State == 1 ? "启用" : "禁用") }}</td>
          <td>
            {{ moment(item.CreateTime).format("YYYY年-MM月-DD日 HH:mm:ss") }}
          </td>
          <td>
            <input
              type="button"
              value="修改"
              class="btn btn-success"
              @click="upd(item.Id)"
            />
            <input
              type="button"
              value="删除"
              class="btn btn-danger"
              @click="del(item.Id)"
            />
            <input
              type="button"
              value="启用"
              v-if="item.State == 0"
              class="btn btn-info"
              @click="updateState(item.Id, item.State)"
            />
            <input
              type="button"
              value="禁用"
              v-if="item.State == 1"
              class="btn btn-info"
              @click="updateState(item.Id, item.State)"
            />
          </td>
        </tr>
      </tbody>
    </table>
    <div>
      <span>总条数:{{ data.totalCount }}</span>
      <span>总页数:{{ data.totalPage }}</span>
      <span>当前页:{{ queryInfo.pageIndex + "/" + data.totalPage }}</span>
      <input type="button" value="首页" @click="gopage('a')" />
      <input type="button" value="上一页" @click="gopage('b')" />
      <input type="button" value="下一页" @click="gopage('c')" />
      <input type="button" value="尾页" @click="gopage('d')" />
      <input type="number" v-model="page" />
      <input type="button" value="跳转" @click="gopage(page)" />
      <select v-model="queryInfo.pageSize" @change="changeSize">
        <option :value="item" v-for="item in arr" :key="item">
          每页显示{{ item }}条
        </option>
      </select>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter, useRoute } from "vue-router";
import { ref, reactive, onMounted } from "vue";
import axios from "axios";
import moment from "moment";

//创建一个路由器  作用：实现页面跳转和传参 （修改，查看详情需要传参  一般传id）
const router = useRouter();

const route = useRoute();

const gopage = (str: any) => {
  switch (str) {
    case "a":
      if (queryInfo.pageIndex == 1) {
        alert("到第一页了，别点了，再点呼死你");
        return;
      }
      queryInfo.pageIndex = 1;
      break;
    case "b":
      if (queryInfo.pageIndex == 1) {
        alert("前面没了，别点了，再点呼死你");
        return;
      }
      queryInfo.pageIndex--;
      break;
    case "c":
      if (queryInfo.pageIndex == data.totalPage) {
        alert("后边没了，别点了，再点呼死你");
        return;
      }
      queryInfo.pageIndex++;
      break;
    case "d":
      if (queryInfo.pageIndex == data.totalPage) {
        alert("到最后一页了，别点了，再点呼死你");
        return;
      }
    case str:
      if (str == "") {
        alert("页码不能为空");
        return;
      }
      if (str < 0 || str > data.totalPage) {
        alert("页码不能小于0，不能大于" + data.totalPage);
        return;
      }
      queryInfo.pageIndex = str;
      break;
  }
  getlist();
  page.value = queryInfo.pageIndex;
};

onMounted(() => {
  getlist();
});

//修改状态 根据id修改状态
const updateState = (id: any, state: any) => {
  if (state == 1) {
    state = 0;
  } else {
    state = 1;
  }
  axios({
    url:'/api/Member/UpdateMemberRightState',
    method:'put',
    params:{
        id:id,
        state:state
    }
  })
  .then((res)=>{
      console.log(res);
      if(res.data==1)
      {
        alert('修改成功');
        getlist();
      }
      else{
        alert('修改失败');
        return;
      }
  })
  .catch((err)=>{
      console.log(err);
  })
};

let data: any = reactive({
  list: [],
  totalCount: 0,
  totalPage: 0,
});

//跳转到权益添加页面
const add = () => {
  router.push("/memberqyadd");
};

//向后端传递的参数
let queryInfo = reactive({
  rightName: "",
  date1: "",
  date2: "",
  pageIndex: 1,
  pageSize: 2,
});

//声明数据存储到第几页
let page = ref(1);

//声明变量每面显示多少条
let arr = ref([2, 4, 6, 8]);

//页码改变时触发
const changeSize = () => {
  queryInfo.pageIndex = 1;
  //调用显示的列表
  getlist();
};

const getlist = () => {
  //获取会员权益列表
  axios({
    url: "/api/Member/MemberRightsList",
    method: "get",
    params: queryInfo,
  })
    .then((res) => {
      console.log(res);
      data.list = res.data.list;
      data.totalCount = res.data.totalCount;
      data.totalPage = res.data.totalPage;
    })
    .catch((err) => {
      console.log(err);
    });
};

const del = (id: any) => {
  var f = confirm("确定要删除吗？");
  if (f == true) {
    axios({
      url: "/api/Member/DelMemberRight",
      method: "delete",
      params: {
        id: id,
      },
    });
  }
};

const upd = (id: any) => {
  router.push({
    path: "/memberrightupd",
    query: {
      id: id,
    },
  });
};
</script>

<style scoped>
span {
  margin-right: 20px;
}
</style>
